<template>
	<view class="content">
		<swiper class="swiper" :autoplay="true" :indicator-dots="true" indicator-active-color="#ff372b" indicator-color="#eee"
		 duration="500" :circular="true">
			<swiper-item v-for="(item,index) in swiper" :key="index">
				<view class="item">
					<image :src="item.imageUrl" class="img"></image>
					<view class="tag">{{item.typeTitle}}</view>
				</view>
			</swiper-item>
		</swiper>

		<view class="main-bar flex-box">
			<view class="flex-item" v-for="(item,index) in contentBar" :key="index">
				<image :src="item.icon" class="img"></image>
				<view>{{item.name}}</view>
			</view>
		</view>
		<view style="width: 100%;">
			<!-- 歌单分类块 组件渲染 -->
			  <songList
			    title="推荐歌单1"
			    link="/pages/songSquare/index?limit=30"
			    :recommendSongs="recommendSongs"
			  />
		</view>
	</view>
</template>

<script>
	import songList from '../../components/songList/songList'
	export default {
		
		data() {
			return {
				recommendSongs:[
					{
						name: '歌单1',
						imgPath: '/static/banner/a.png',
						playCount: 12
					},
					{
						name: '歌单2',
						imgPath: '/static/banner/b.png',
						playCount: 13
					},
					{
						name: '歌单3',
						imgPath: '/static/banner/c.png',
						playCount: 14
					},
					{
						name: '歌单4',
						imgPath: '/static/banner/a.png',
						playCount: 15
					},
					{
						name: '歌单5',
						imgPath: '/static/banner/b.png',
						playCount: 16
					},
					{
						name: '歌单6',
						imgPath: '/static/banner/c.png',
						playCount: 17
					}
				],
				title: 'Hello123',
				url: '',
				contentBar: [{
						icon: '/static/topImg/rl.png',
						name: "每日推荐"
					},
					{
						icon: '/static/topImg/gd.png',
						name: "歌单"
					},
					{
						icon: '/static/topImg/phb.png',
						name: "排行榜"
					},
					{
						icon: '/static/topImg/dt.png',
						name: "电台"
					},
					{
						icon: '/static/topImg/zb.png',
						name: "直播"
					},
				],
				swiper: [{
						imageUrl: '/static/banner/a.png',
						typeTitle: '标题1'
					}, {
						imageUrl: '/static/banner/b.png',
						typeTitle: '标题2'
					},
					{
						imageUrl: '/static/banner/c.png',
						typeTitle: '标题3'
					}
				]
			}
		},
		components:{
			songList
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.flex-box{
		display: flex;
		width: 100%;
	}
	.flex-item{
		flex: 1;
		background-color: red;
		margin: 5px;
		font-size: 24rpx;
		border-radius: 50%;
		color: #eee;
		vertical-align: middle;
		padding: 10rpx 0;
	}
	.main-bar {
		width: 100%;
		padding-bottom: 22rpx;
		text-align:
			center;
		line-height: 70rpx;
		color: #666;
		border-bottom: 1rpx solid #e6e6e6;

		.img {
			display: block;
			width: 50rpx;
			height: 50rpx;
			margin: 0 auto;
		}
	}

	.swiper {
		height: 300rpx;
		width: 100%;

		.img {
			height: 300rpx;
			width: 100%;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
